<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>增加节点</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: #00aeec;
        }
    </style>
</head>

<body>
<h2>增加节点</h2>
<p>
    很多情况下，我们需要在页面中增加元素 <br>
    比如，点击发布按钮，可以新增一条信息 <br>
    <br>
    一般情况下，我们新增节点，按照如下操作： <br>
    创建一个新的节点 <br>
    把创建的新的节点放入到指定的元素内部
</p>
<hr>

<h3>1.创建节点</h3>
<p>
    即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点 <br>
    创建元素节点方法： <br>
    // 创建一个新的元素节点 <br>
    document.createElement('标签名称')
</p>

<h3>2.追加节点</h3>
<p>
    要想在界面看到，还得插入到某个父元素中
</p>
<p>
    插入到父元素的最后一个子元素:
    父元素.appendChild(要插入的元素)
</p>
<p>
    插入到父元素中某个子元素的前面:
    父元素.insertBefore(要插入的元素, 在那个元素前面)
</p>
<hr>

<ul>
    <li>我是第一个li</li>
</ul>

<script>
    // 创建节点
    const div标签 = document.createElement('div') // 一个dvi标签
    console.log(div标签) // 控制台看信息, 有信息 证明这个 dvi标签是创建成功的, 但是你还可以添加到任何元素里, 所以页面没有显示

    // 追加节点, 这里body是页面标签, 把创建的div插入到 body标签里, 效果页面显示div标签
    const 页面 = document.querySelector('body')
    页面.appendChild(div标签) //追加到父级的最后一个子元素里

    // document.body.appendChild(div标签) // 也可以这样写


    // 获取DOM元素
    const ul标签 = document.querySelector('ul')
    // 创建节点
    const li标签 = document.createElement('li') // 节点,li标签
    li标签.innerHTML = '我是追加的li' // 节点,文本信息
    ul标签.appendChild(li标签) // 在父级里,追加子级. 这里是追加一个li标签


    const li标签2 = document.createElement('li') // 节点,li标签
    li标签2.innerHTML = '我是插入的li' // 节点,文本信息
    // insertBefore(插入的元素, 放到哪个元素的前面)
    ul标签.insertBefore(li标签2, ul标签.children[0])
    // ul标签 是父级,相当于是一个数组.  children定位那一个子级,因为是数组 0 是第一个元素
</script>
<!--
案例 学成在线案例渲染
1_JavaScript基础/8_对象/案例/12_综合案例/index3.html
-->
</body>
</html>